<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>角色管理</title>
    <link rel="stylesheet" href="/box/layui/css/layui.css">
    <link rel="stylesheet" href="/box/css/metroStyle/metroStyle.css">
    <script src="/box/layui/layui.js"></script>
    <script src="/box/js/jquery-3.3.1.js"></script>
    <script src="/box/js/jquery.ztree.all.js"></script>
    <script src="/box/js/config.js"></script>
    <link rel="shortcut icon" href="/box/assets/ico/minus.png">
    <style>
        .box-pad {
            padding: 1%;
        }
        #role {
            display: none;
            padding: 30px 50px 0 50px;
        }
    </style>
</head>

<body>
    <div id="role">
        <form class="layui-form box" id="roleForm" lay-filter="roleForm">
            <input type="hidden" name="roleId">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="roleName" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <div class="box-pad">
        <h1>角色列表</h1>
        <hr>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名：</label>
                    <div class="layui-inline">
                        <input type="text" id="roleName" class="layui-input" autocomplete="off">
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="select()">查询</button>
            </div>
        </form>
        <div class="layui-row">
            <div class="layui-col-sm8">
                <table class="layui-table" lay-filter="roleTable" lay-data="{id: 'roleTable',text: {none: '没有查到相关数据'} , url: 'http://localhost:8888/role/list',page: true,limit: 10,even: true,toolbar: '#toolbarDemo'}">
                    <thead>
                    <th lay-data="{type:'radio'}"></th>
                    <th lay-data="{field:'roleId'}">编号</th>
                    <th lay-data="{field:'roleName'}">角色名称</th>
                    <th lay-data="{toolbar:'#barDemo'}">操作</th>
                    </thead>
                </table>
            </div>
            <div class="layui-col-sm3 layui-col-sm-offset1">
                <h2>显示所有的权限</h2>
                <hr>
                <ul id="treeDemo" class="ztree"></ul>
                <hr>
                <button class="layui-btn" onclick="assignPers()">授权</button>
            </div>
        </div>

        <script language="JavaScript">
            var zTreeObj;
            var roleId; //  选中的角色编号
            var setting = {
                check : {
                    enable : true
                }
            };
            //  加载树形权限图
            $(window).ready(function () {
                $.get(new Config().base_url + "/permission/allTwo", function (dat) {
                     // 使树形结构图一开始就展开
                    for (let first of dat) {
                        first.open = true;
                        for (let second of first.children) {
                            second.open = true;
                        }
                    }
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, dat);
                });
            });

            //  加载角色对应的权限并显示
            function loadPerTree(roleId) {
                $.get(new Config().base_url + "/permission/rolePers/" + roleId, function (pers) {
                    $.get(new Config().base_url + "/permission/allTwo", function (zNodes) {
                        for (let first of zNodes) {
                            first['open'] = true;
                            if ($.inArray(first.permissionId, pers) != -1) {
                                first.checked = true;
                            }
                            for (let second of first.children) {
                                second.open = true;
                                if ($.inArray(second.permissionId, pers) != -1) {
                                    second.checked = true;
                                }
                                for (let third of second.children) {
                                    if ($.inArray(third.permissionId, pers) != -1) {
                                        third.checked = true;
                                    }
                                }
                            }

                        }
                        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    });
                });
            }

            //  向角色授权
            function assignPers() {
                var nodes = zTreeObj.getCheckedNodes();
                var url = new Config().base_url + "/role/assignPers";
                var postData = {
                    roleId : roleId,
                    perIds : ''
                };
                $.each(nodes, function (d) {
                    postData.perIds += this.permissionId;
                    if (d < nodes.length - 1) {
                        postData.perIds += ',';
                    }
                });
                $.post(url, postData, function () {
                    layer.msg("角色授权成功！");
                });
            }

        </script>

        <script>
            var table;
            layui.use(['table','form'], function() {
                table = layui.table;
                var form = layui.form;

                //  监听单选按钮事件
                table.on('radio(roleTable)', function (obj) {
                    roleId = obj.data.roleId;
                    loadPerTree(roleId);
                });

                //头工具栏事件
                table.on('toolbar(roleTable)', function(obj){
                    switch(obj.event){
                        case 'add':
                            layer.open({
                                type: 1,
                                title: "添加角色",
                                skin: "layui-layer-molv",
                                anim: 0,
                                area: "500px",
                                maxmin: true,
                                content: $("#role"),
                                btn: ['确定','取消'],
                                yes: function () {
                                    var str = $("#roleForm").serialize();
                                    $.post(`${new Config().base_url}/role/add`,str, das => {
                                        layer.close(layer.index);
                                        table.reload("roleTable");
                                    });
                                }
                            });
                            break;
                    }
                });

                //  监听行内的工具条，删除、修改
                table.on('tool(roleTable)', function (obj) {
                    var data = obj.data;
                    var layEvent = obj.event;

                    if (layEvent === 'del') {  // 删除
                        layer.confirm('真的要删除吗？', function (index) {
                            //  关闭当前弹窗
                            layer.close(index);
                            //  发送异步请求
                            $.post("http://localhost:8888/role/delete", {id:data.roleId}, function (da) {
                                table.reload("roleTable",{
                                    page: {
                                        curr: 1
                                    }
                                });
                            });
                        });
                    } else if (layEvent === 'edit') {  // 编辑
                        layer.open({
                            type: 1,
                            title: "修改角色",
                            //  皮肤
                            skin: "layui-layer-molv",
                            //  动画
                            anim: 0,
                            area: "500px",
                            maxmin: true,
                            content: $("#role"),
                            btn: ['确定','取消'],
                            success: function () {
                                form.val('roleForm',data);
                            },
                            yes: function () {
                                var str = $("#roleForm").serialize();
                                $.post(`${new Config().base_url}/role/update`,str, das => {
                                    layer.close(layer.index);
                                    table.reload("roleTable");
                                });
                            }
                        })
                    }
                });
            });
            function select() {
                table.reload("roleTable",{
                    page: {
                        curr: 1
                    },
                    where: {
                        roleName: $("#roleName").val()
                    }
                });
            }
        </script>
        <!--  编辑、删除按钮  -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <!--  表格上面的工具栏按钮  -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            </div>
        </script>
    </div>
</body>
</html>